<template>
	<view :class="modal ? 'show-qrcode' : 'hide-qrcode'">
		<!-- <view class="box-qrcode" :style="{'margin-left':  marginLeft + 'px'}" @longtap="longtapCode"> -->
		<view class="box-qrcode" @longtap="longtapCode">
			<!-- style="width: 550rpx;height: 550rpx;" -->

			<canvas class="canvas-qrcode" :style="style_w_h" :canvas-id="qrcode_id">
			<!-- <canvas class="canvas-qrcode" :canvas-id="qrcode_id"> -->
				<!-- #ifndef MP -->
				<!-- <view v-if="modal&&is_themeImg" :style="style_w_h" class="box-img-qrcode"> -->
				<view v-if="modal && is_themeImg" class="box-img-qrcode">
					<!-- <image :style="style_w_h_img" mode="scaleToFill" :src="themeImg"></image> -->
					<image mode="scaleToFill" :src="themeImg"></image>
				</view>
				<!-- #endif -->
			</canvas>

			<!-- <image mode="scaleToFill" :src="imagePath"></image> -->
		</view>
	</view>
</template>

<script>
var qr_we = require('./qrcode_wx.js');
const qrCode = require('./weapp-qrcode.js');
export default {
	data() {
		return {
			isAndroid: false,
			show: true,
			imagePath: '',
			// qrcode_id: 'qrcode_id',
			marginLeft: 0,
			//一般的安卓app只需加30就能显示全
			//苹果app的不加就能显示全，加了就要弄margin-left
			//有些安卓app显示不全
			// add_num: 30,
			add_num: 20,
			add_num_key: 'rectify_code_key'
		};
	},
	props: {
		modal: {
			type: Boolean,
			default: false
		},
		url: {
			type: String,
			default: ''
		},
		height: {
			type: Number,
			default: 260
		},
		width: {
			type: Number,
			default: 260
		},
		themeColor: {
			type: String,
			default: '#333333'
		},
		qrcode_id: {
			type: String,
			default: 'qrcode_id'
		},
		is_themeImg: {
			type: Boolean,
			default: false
		},
		themeImg: {
			type: String,
			default: 'https://cdn.pixabay.com/photo/2016/11/29/13/24/balloons-1869816__340.jpg'
		},
		h_w_img: {
			type: Number,
			default: 30
		}
	},
	watch: {},
	computed: {
		style_w_h() {
			return this.set_style_w_h();
		},
		style_w_h_img() {
			let that = this;
			var height = parseInt(that.h_w_img);
			var width = parseInt(that.h_w_img);
			var style = '';
			if (height > 0) {
				style = `height:${height * 2}rpx;`;
			}
			if (width > 0) {
				style += `width:${width * 2}rpx;z-index: 2;`;
			}

			return style;
		}
	},
	created: function () {
		let that = this;
		try {
			//app苹果二维码不居中
			//#ifndef MP
			let isAndroid = false;
			const res = uni.getSystemInfoSync();
			if (res.platform == 'android') {
				isAndroid = true;
			} else {
				isAndroid = false;
			}

			if (!isAndroid) {
				that.marginLeft = 46;
			}

			that.isAndroid = isAndroid;
			try {
				const add_num = uni.getStorageSync(that.add_num_key);
				if (add_num) {
					that.add_num = add_num;
				}
			} catch (e) {
				// error
			}
			// #endif
		} catch (e) {
			// error
		}

		//#ifdef MP
		//that.marginLeft = 40;
		// #endif
	},
	methods: {
		set_style_w_h() {
			let that = this;
			var height = parseInt(that.height);
			var width = parseInt(that.width);
			var style = '';
			var height = height * 2;
			var width = width * 2;

			//#ifndef MP
			var add = that.add_num;
			// var add = 0;

			height += add;
			width += add;
			// #endif

			if (height > 0) {
				style = `height:${height}rpx;`;
			}
			if (width > 0) {
				style += `width:${width}rpx;`;
			}

			return style;
		},
		hideQrcode() {
			this.$emit('hideQrcode');
		},
		// 二维码生成工具
		crtQrCode() {
			let that = this;
			//#ifndef MP
			new qrCode(that.qrcode_id, {
				text: this.url,
				width: that.width,
				height: that.height,
				colorDark: that.themeColor, //#333333
				colorLight: '#FFFFFF',
				correctLevel: qrCode.CorrectLevel.H
			});
			// #endif
			//#ifdef MP
			that.createQrCode(this.url, that.qrcode_id, that.width, that.height, that.themeColor, that.is_themeImg, that.themeImg, that.h_w_img);
			// #endif

			//that.createQrCode(this.url, that.qrcode_id, that.width, that.height);
		},
		//#ifdef MP

		createQrCode: function (url, canvasId, cavW, cavH, cavColor, haveImg, imgurl, imgsize) {
			//调用插件中的draw方法，绘制二维码图片
			qr_we.api.draw(url, canvasId, cavW, cavH, cavColor, haveImg, imgurl, imgsize, this, this.canvasToTempImage);
			// setTimeout(() => { this.canvasToTempImage();},100);
		},

		// #endif
		//获取临时缓存照片路径，存入data中
		canvasToTempImage: function () {
			var that = this;
		},
		saveImage: function () {
			var that = this;
			uni.canvasToTempFilePath(
				{
					canvasId: that.qrcode_id,
					success: function (res) {
						var tempFilePath = res.tempFilePath;
						console.log(tempFilePath);
						that.imagePath = tempFilePath;

						//保存到相册
						// uni.saveFile({
						//       tempFilePath: tempFilePath,
						//       success: function (res2) {
						//         var savedFilePath = res2.savedFilePath;

						//       }
						// });
						uni.saveImageToPhotosAlbum({
							filePath: tempFilePath,
							success: function (res3) {
								uni.showModal({
									title: '提示',
									content: '保存成功',
									confirmText: '确定',
									showCancel: false,
									confirmColor: '#33CCCC',
									success(res4) {}
								});
							}
						});
					},
					fail: function (res) {
						console.log(res);
					}
				},
				that
			);
		},
		//微信小程序支持：长按二维码，提示是否保存相册
		//安卓APP长按校正二维码
		longtapCode() {
			var that = this;

			//#ifndef MP
			uni.showModal({
				title: '校正二维码',
				content: '二维码是否异常',
				confirmText: '确定',
				confirmColor: '#33CCCC',
				success(res) {
					if (res.confirm) {
						that.rectify_code();
					}
				}
			});
			// #endif

			//#ifdef MP-WEIXIN
			uni.showModal({
				title: '提示',
				content: '是否保存到相册',
				confirmText: '确定',
				confirmColor: '#33CCCC',
				success(res) {
					if (res.confirm) {
						that.saveImage();
					}
				}
			});
			// #endif
		},
		//安卓有些手机不正常，长按可选择矫正
		rectify_code() {
			var that = this;
			let add_num = that.add_num;
			add_num += 30;
			that.add_num = add_num;
			that.crtQrCode(); //重新生成才会立即覆盖
			try {
				//第一次长按校正设置了就不用在设置
				uni.setStorage({
					key: that.add_num_key,
					data: add_num,
					success: function () {}
				});
			} catch (e) {
				// error
			}
		}
	},
	mounted() {}
};
</script>

<style scoped lang="scss">
// .qrcode-box {
// 	position: fixed;
// 	left: 0;
// 	top: 0;
// 	right: 0;
// 	bottom: 0;
// 	height: 100vh;
// 	width: 100vw;
// 	background-color: rgba(59, 59, 59, 0.6);
// 	// opacity: 0.8;
// 	text-align: center;
// 	display: flex;
// 	align-items: center;
// 	display: none;

// 	.qrcode-item {
// 		flex: 1;
// 		position: relative;
// 		text-align: center;

// 		.item-box {
// 			width: 90%;
// 			margin: auto;
// 			display: inline-block;
// 			margin-top: 30%;
// 			padding-bottom: 30rpx;

// 			// animation: show 0.7s;
// 			.title {
// 				font-size: 46rpx;
// 				text-align: center;
// 				margin-bottom: 24rpx;
// 			}

// 			.canvas {
// 				margin: auto;
// 				display: inline-block;
// 				margin: auto;
// 			}

// 			background-color: #FFFFFF;
// 		}

// 	}
// }


.box-qrcode {
	text-align: center;
	position: relative;
	.box-img-qrcode {
		position: absolute;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		z-index: 2;
	}
}

image {
	width: 60upx;
	height: 60upx;
	border-radius: 50%;
}
.canvas-qrcode {
	margin: auto;
	display: inline-block;
	float: left;
}

.opacity-qrcode {
	opacity: 0;
	display: block;
}

.show-qrcode {
	display: block;
	animation: fade 0.7s;

	// -moz-animation: fade 0.5s; /* Firefox */
	// -webkit-animation: fade 0.5s; /* Safari 和 Chrome */
	// -o-animation: fade 0.5s;
}

.hide-qrcode {
	animation: hide 0.7s;
}

@keyframes fade {
	from {
		opacity: 0.8;
	}

	to {
		opacity: 1;
	}
}

@keyframes hide {
	from {
		opacity: 1;
	}

	to {
		opacity: 0;
	}
}
</style>
